<template>
  <swiper
    :options="swiperOption"
    @paste="pasteImg"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
    v-bind="$attrs"
    :lazy="true"
    class="c-upload uploadImageSwiper paginate-small"
  >
    <swiper-slide
      v-for="(element, index) in fileList"
      class="c-upload-item"
      :key="index"
    >
      <div
        :class="element.status"
        class="slide-content"
        :key="element.uid"
        :style="{
          width: itemWidth
        }"
      >
        <a-spin :spinning="!element.ossUrl">
          <span class="c-upload-item-image" v-if="element.ossUrl">
            <!-- 去除是否为图片的校验是因为有的链接没有图片后缀 -->
            <div class="h-full contents">
              <img
                v-lazyLoad="element?.ossUrl?.trim()"
                data-w="170"
                importance="high"
                :alt="element.ossName"
              />
            </div>
          </span>
        </a-spin>

        <span class="c-upload-item-action" v-if="element.ossUrl">
          <a-icon type="eye" @click="handlePreview(element, index)" />

          <a-icon
            v-if="showDownload"
            type="download"
            class="mr10 ml10"
            @click="downloadImg(element)"
          />
          <a-popconfirm
            title="确定删除图片?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDelete(index)"
          >
            <a-icon
              v-if="!disabled && !element.disabled"
              class="cp"
              type="delete"
            />
          </a-popconfirm>
        </span>
      </div>
    </swiper-slide>
    <swiper-slide :key="9999">
      <label
        role="button"
        @drop="dropEvent"
        @dragover="allowDrop"
        class="c-upload-item c-upload-select h-full"
        v-if="!disabled && state.fileList.length < limitNum && showUpload"
        :style="{
          width: uploadBtnWidth
        }"
      >
        <div class="tac">
          <a-icon type="plus" />
          <slot></slot>
        </div>

        <input
          type="file"
          class="uploadImg"
          :accept="state.accept"
          :disabled="disabled"
          :multiple="multiple"
          @change="handlerChange"
          style="display: none"
        />
        <div style="z-index: -1; overflow: auto" class="pa w100p h100p">
          <input ref="inputPaste" type="text" class="w100p h100p" />
        </div>
      </label>
    </swiper-slide>
  </swiper>
</template>
<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import uploadMixin from '../OssUpload/uploadMixin'
import preview from '../preview.vue'
export default {
  mixins: [uploadMixin],
  components: {
    Swiper,
    SwiperSlide,
    preview
  },
  props: {
    previewMountGlobal: {
      type: Boolean,
      default: true
    },
    itemWidth: {
      type: String,
      default: '100%'
    },
    uploadBtnWidth: {
      type: String,
      default: '100px'
    }
  }
}
</script>
<style>
.uploadImageSwiper .swiper-slide {
  width: unset;
  height: unset;
}
.uploadImageSwiper .slide-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploadImageSwiper .swiper-button-prev,
.uploadImageSwiper .swiper-rtl .swiper-button-next {
  height: 35px;
  width: 20px;
  left: 0;
}
.uploadImageSwiper .swiper-button-next,
.uploadImageSwiper .swiper-rtl .swiper-button-prev {
  right: 0;
  height: 35px;
  width: 20px;
}
.uploadImageSwiper .swiper-rtl .swiper-button-next::after,
.uploadImageSwiper .swiper-button-prev::after,
.uploadImageSwiper .swiper-button-next::after,
.uploadImageSwiper .swiper-rtl .swiper-button-prev::after {
  color: #000;
  font-size: 14px;
}
</style>
<style lang="less" scoped>
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.c-upload {
  margin: 0;
  padding: 0;
  &::after {
    content: '';
    display: block;
    clear: both;
  }
  &-item {
    display: flex;
    margin-right: 8px;
    margin-bottom: 8px;
    float: left;
    // padding: 8px;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
    position: relative;
    border-radius: 2px;
    &:hover {
      cursor: pointer;
      .c-upload-item-image::before {
        opacity: 1;
      }
      .c-upload-item-action {
        opacity: 1;
      }
    }
    &-action {
      position: absolute;
      top: 50%;
      z-index: 10;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      opacity: 0;
      left: 50%;
      transition: all 0.3s;
      :deep .anticon {
        z-index: 10;
        width: 16px;
        margin: 0 4px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
      }
    }
    :deep .ant-spin-container,
    .ant-spin-nested-loading {
      height: 100%;
      width: 100%;
    }
    &-image {
      position: relative;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      &::before {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: all 0.3s;
        content: ' ';
      }

      img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
  &-select {
    float: left;
    border: 1px dashed #d9d9d9;
    &:hover {
      border-color: #1890ff;
    }
  }
}
</style>
